<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车-全选2</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .table{
            width: 600px;
            margin: 50px auto;
        }
        .table .tr{
            width: 600px;
            height: 40px;
            line-height: 40px;
            background-color: darkblue;
            color: darkkhaki;
        }
        .table .tr .item{
            width: 100px;
            height: 40px;
            text-align: center;
            float: left;
        }
        .table .tr .item input{
            width: 50px;
        }

    </style>
</head>
<body>
    <div id="app">
        <div class="table">
            <div class="tr">
                <div class="item">
                    全选<input type="checkbox" :checked = "checkAll" @click="checkedAll">
                </div>
                <div class="item">
                    名称
                </div>
                <div class="item">
                    价格
                </div>
                <div class="item">
                    数量
                </div>
                <div class="item">
                    小计
                </div>
                <div class="item">
                    操作
                </div>
            </div>

            <div class="tr" v-for="item in list">
                <div class="item">
                    <input type="checkbox" v-model="item.checked">
                </div>
                <div class="item">
                    {{item.goodsname}}
                </div>
                <div class="item">
                    {{item.goodsprice.toFixed(2)}}
                </div>
                <div class="item">
                    <button v-show="item.goodsnum>1" @click="cale(item,-1)">-</button>
                    <input type="number" v-model="item.goodsnum">
                    <button @click="cale(item,1)">+</button>
                </div>
                <div class="item">
                    {{(item.goodsnum * item.goodsprice).toFixed(2)}}
                </div>
                <div class="item" @click="del(item.id)">
                    删除
                </div>
            </div>

            <div class="tr">
                <div class="item" @click = "delAll">
                    全删
                </div>
                <div class="item">
                    
                </div>
                <div class="item">
                    
                </div>
                <div class="item">
                    总数
                    <span>{{totalnum}}</span>
                </div>
                <div class="item">
                    总价
                    <span>{{totalprice}}</span>
                </div>
                <div class="item">
                    
                </div>
            </div>
        </div>

    </div>
    
</body>
<script>
    new Vue({
        el : "#app",
        data : {
            list : [{ id: 1, goodsname: "商品名称一", goodsnum: 10, goodsprice: 100 , checked : false}, { id: 2, goodsname: "商品名称二", goodsnum: 2, goodsprice: 100 , checked : true}, { id: 3, goodsname: "商品名称三", goodsnum: 10, goodsprice: 100 , checked : true}],

            totalnum : "",
            totalprice : "",
            checkAll : false,


        },
        methods : {
            cale(item,num){
                item.goodsnum = item.goodsnum*1+num;
            },
            del(id){
                this.list = this.list.filter(item => item.id != id)
            },
            checkedAll(){
                let flag = window.event.target.checked;
                this.checkAll = flag;
                this.list.forEach(item => item.checked = flag);
            },
            delAll(){
                this.list = this.list.filter(item => item.checked == false);
            }
        },
        watch : {
            list : {
                deep : true,
                handler(newlist){
                    let num = 0;
                    let price = 0;


                    if(newlist.length){

                        this.checkAll = this.list.every(item => item.checked)

                        let selectList = newlist.filter(item => item.checked == true);
                        if(selectList){

                            num = selectList.map(item => item.goodsnum).reduce((a,b)  => a+b);
                            price = selectList.map(item => item.goodsnum*item.goodsprice).reduce((a,b) => a+b);
                        }


                    }else{
                        this.checkAll = false;
                    }


                    this.totalnum = num;
                    this.totalprice = price;  
                },
                    
            },
            
        

        }

    })
</script>
</html>